<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>网民行为分析</title>
  <link rel="stylesheet" type="text/css" href="static/css/main1.css" />
  <link rel="stylesheet" type="text/css" href="static/css/animate.css" />
  <link rel="stylesheet" type="text/css" href="static/css/flex.css" />
  <link rel="stylesheet" type="text/css" href="static/css/teamWork.css" />
  <link rel="stylesheet" type="text/css" href="static/fonts/iconfont.css">
  <script src="static/3rd/jquery-3.2.1.min.js"></script>
  <script src="static/3rd/ScrollText.js"></script>
  <!--<script src="static/3rd/jquery.nicescroll.js"></script>-->
  <script src="static/3rd/jquery.backstretch.min.js"></script>
  <script src="static/js/utils.js"></script>
  <style>
    table {
      border-collapse: collapse;
      width: 100%;
      table-layout: fixed;
    }

    .tab_left {
      width: 25%
    }

    .map_middle {
      width: 40%;
    }

    .tab_right {
      width: 35%
    }

    .right_table_box {
      margin: 0
    }
    .chart-tip {
      margin-top: 20px;
      margin-left: 1vw;

    }
    .chart-tip p {
      font-size: 1.25vw;
    }
    .chart-tip strong {
      color: #fce24f;
      font-size: 1.55vw;
    }
    .content .top_tip, .brief {
		    font-size: 16px;
		    color: #a4d6ff;
		    font-weight: bold;
		    text-indent: 20px;
		}
		.top_tip strong, .brief strong {
    color: #fce24f;
    font-size: 21px;
    vertical-align: baseline;
}
.brief {
    margin-top: 15px;
}
  </style>
</head>

<body style="background: #040f15;">
  <img class="bgImg" src="" alt="" />
  <!-- <div class="menu_bg">
			<ul class="menuLeft">
				<li>
					<a class="active" href="网民行为分析.html">网民行为分析</a>
				</li>
				<li>
					<a href="网站访问量分析.html">网站访问量分析</a>
				</li>
			</ul>
		</div> -->
  <div class="con-box flex-d-col">
    <div class="header">
				<div class="logo">网民行为分析</div>
		</div>
    <div class="brief">
      截至2018年2月,省内关注网站数量
      <strong>50,232</strong>,&nbsp;&nbsp; 今日访问量
      <strong>1,682</strong>,&nbsp;&nbsp; 累计访问量
      <strong>92,324</strong>
    </div>
    <div class="teamWork flex-1 flex-layout" style="padding-top: 15px;">
      <div class="left-chart flex-d-col mr-10">
        <div class="boxBg flex-1 mb-10 flex-d-col">
          <div class="box-title">
            <i class="icon iconfont icon-tongji6"></i>网站访问量分类统计
          </div>
          <div class="flex-1" id="pie1"></div>
        </div>
        <div class="boxBg flex-1 mb-10 flex-d-col">
          <div class="box-title">
            <i class="icon iconfont icon-tongji6"></i>网站访问量IP类型统计
          </div>
          <div class="flex-1 flex-layout">
            <div class="flex-1 chart-tip">
              <p>合计</p>
              <p><strong>10,910</strong></p>
            </div>
            <div class="flex-3" id="pie2"></div>
          </div>
        </div>
        <div class="boxBg flex-1 flex-d-col">
          <div class="box-title">
            <i class="icon iconfont icon-tongji6"></i>活跃用户IP数量统计
          </div>
          <div class="flex-1" id="pie3"></div>
        </div>
      </div>
      <div class="flex-d-col mr-10" style="width: calc(50vw - 40px);">
        <div class="flex-1 flex-d-col mb-10 boxBg">
          <div class="box-title">
            <i class="icon iconfont icon-tongji6"></i>我省活跃用户IP数量趋势统计
          </div>
          <div class="flex-1 flex-d-col" id="line">
          </div>
        </div>
        <div class="flex-1 flex-d-col mb-10 boxBg">
          <div class="box-title">
            <i class="icon iconfont icon-tongji6"></i>我省活跃用户IP数量分布统计
          </div>
          <div class="flex-1 flex-d-col" id="bar1">
          </div>
        </div>
        <div class="flex-1 flex-d-col boxBg">
          <div class="box-title">
            <i class="icon iconfont icon-tongji6"></i>各地区网站访问量统计
          </div>
          <div class="flex-1 flex-d-col" id="bar2">
          </div>
        </div>
      </div>
      <div class="flex-2 flex-d-col" style="width: 25vw;">
        <div class="flex-1 flex-d-col mb-10 boxBg">
          <div class="box-title">
            <i class="icon iconfont icon-tongji6"></i>网站访问量排名
          </div>
          <div class="flex-1 flex-d-col" id="bar3">
          </div>
        </div>
        <div class="flex-1 flex-d-col mb-10 boxBg">
          <div class="box-title">
            <i class="icon iconfont icon-tongji6"></i>用户IP访问量排名
          </div>
          <div class="flex-1 flex-d-col box-table">
            <table class="ui-table flex-1 flex-d-col">
              <thead class="tab_heard">
                <tr>
                  <th>序号</th>
                  <th>运行商</th>
                  <th>访问量</th>
                  <th>用户IP</th>
                </tr>
              </thead>
              <tbody id="ipSort" class="tab_content tbodyHeight"></tbody>
            </table>
          </div>
        </div>
        <div class="flex-1 flex-d-col boxBg">
          <div class="box-title">
            <i class="icon iconfont icon-tongji6"></i>省内关注网站访问分析
          </div>
          <div class="flex-1 flex-d-col" id="barLine">
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--<div class="foot">
    <a href="新闻类.html" class="next_btn"></a>
  </div>-->
  </div>

  <script src="static/echarts/echarts.min.js"></script>
  <script src="static/js/menuShow.js"></script>
  <script src="static/js/boxBg.js"></script>
  <script>
    $(".ec_tab li").click(function () {
      $(this).addClass("active").siblings().removeClass("active")
    })
  </script>

  <script>
    var n = 0;
    $(".tabType li").click(function () {
      $(this).addClass('active').siblings().removeClass()
      n = $(this).index();
      $(this).parent('ul').siblings('.tab_classify_content').children('div').eq(n).show().siblings().hide();
    })
  </script>
  <script src="static/js/imgSkin.js"></script>
  <script type="text/template" id="ipSortTpl">
    <tr>
      <td>
        <%= index %>
      </td>
      <td>
        <%= country %>
      </td>
      <td>
        <%= count %>
      </td>
      <td>
        <%= ip %>
      </td>
    </tr>
  </script>
  <script type="text/javascript" src="static/js/lodash.js"></script>

  <script>
    $(function () {
      
      var ipSort = [{
          country: '中国',
          count: 100,
          ip: 'XXXXXXXXXX'
        },
        {
          country: '美国',
          count: 100,
          ip: 'XXXXXXXXXX'
        },
        {
          country: '印度',
          count: 100,
          ip: 'XXXXXXXXXX'
        },
        {
          country: '俄罗斯',
          count: 100,
          ip: 'XXXXXXXXXX'
        },
        {
          country: '英国',
          count: 100,
          ip: 'XXXXXXXXXX'
        },
        {
          country: '法国',
          count: 100,
          ip: 'XXXXXXXXXX'
        },
        {
          country: '德国',
          count: 100,
          ip: 'XXXXXXXXXX'
        },
        {
          country: '日本',
          count: 100,
          ip: 'XXXXXXXXXX'
        },
        {
          country: '韩国',
          count: 100,
          ip: 'XXXXXXXXXX'
        },
        {
          country: '加拿大',
          count: 100,
          ip: 'XXXXXXXXXX'
        },
        {
          country: '菲律宾',
          count: 100,
          ip: 'XXXXXXXXXX'
        },
        {
          country: '澳大利亚',
          count: 100,
          ip: 'XXXXXXXXXX'
        },
      ];
      insertInfoTpl(ipSort, $('#ipSort'), $('#ipSortTpl'))
    });
    /**
     * [insertInfoTpl 插入 html信息]
     * @param  {[type]} data [渲染所需的数据]
     * @param  {[type]} dom  [加入页面中的哪个DOM节点]
     * @return {[type]}      [description]
     */
    function insertInfoTpl(data, dom, tpl) {
      var infoTpl = tpl.html()
      var compiled = _.template(infoTpl)
      var html = ''
      _.forEach(data, function (item, index) {
        item.index = index + 1
        // console.log(item, index)
        html += compiled(item)
      })
      dom.append($(html))
    }
  </script>
  <script>
    $(function () {
      var _colors = ['#FFF71D', '#ffffff', '#1FFDB2', '#5D80FC', '#6D54DC']
      var pie1Lengend = ['TYPE_1', 'TYPE_2', 'TYPE_3', 'TYPE_4', 'TYPE_5']
      var pie2Lengend = ['动态', '静态', '保留']
      var pie3Lengend = ['TYPE_1', 'TYPE_2', 'TYPE_3', 'TYPE_4', 'TYPE_5']
      var pie1Data = genSeriesData(pie1Lengend)
      var pie2Data = genSeriesData(pie2Lengend)
      var pie3Data = genSeriesData(pie3Lengend)
      pie1Data[0].selected = true
      pie2Data[0].selected = true
      pie3Data[0].selected = true

      // var pie1Chart = echarts.init($('#pie1')[0])
      // var pie2Chart = echarts.init($('#pie2')[0])
      // var pie3Chart = echarts.init($('#pie3')[0])
      var pie1Opt = getPieOpt(pie1Data)
      var pie2Opt = getPieOpt(pie2Data, ["#ffe34e", "#93dd6e", "#09e2cb", "#ff8700"])
      var pie3Opt = getPieOpt(pie3Data)
      pieInit('#pie1', pie1Data, pie1Opt)
      pieInit('#pie2', pie2Data, pie2Opt)
      pieInit('#pie3', pie3Data, pie3Opt)

      function getPieOpt(pieData, colors) {
        colors = colors || ['#FFF71D', '#ffffff', '#1FFDB2', '#5D80FC', '#6D54DC']
        return {
          series: [{
            type: 'pie',
            radius: ['66%', '84%'],
            center: ['50%', '50%'],
            silent: true,
            data: [{
              value: 1,
              itemStyle: {
                normal: {
                  color: ' rgba(7,107,158,0)',
                  borderColor: 'rgba(6,39,108,0.33)',
                  borderWidth: 1,
                  shadowBlur: 20,
                  shadowColor: 'rgba(21,41,185,.75)'
                }
              },
              labelLine: {
                normal: {
                  show: false
                },
                emphasis: {
                  show: false
                }
              }
            }]
          }, {
            type: 'pie',
            radius: ['66%', '84%'],
            center: ['50%', '50%'],
            silent: true,
            label: {
              normal: {
                show: false,
              }
            },
            data: [{
              value: 1,
              itemStyle: {
                normal: {
                  color: 'rgba(6,33,98,0)',
                  shadowBlur: 20,
                  shadowColor: 'rgba(21,41,185,0.55)'
                }
              },
              labelLine: {
                normal: {
                  show: false
                },
                emphasis: {
                  show: false
                }
              }
            }]
          }, {
            name: '占比',
            type: 'pie',
            radius: ['66%', '84%'],
            center: ['50%', '50%'],
            color: colors,
            hoverAnimation: true,
            itemStyle: {
              normal: {
                label: {
                  show: false
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            data: pieData
          }, {
            name: '',
            type: 'pie',
            clockWise: true,
            hoverAnimation: false,
            animationType: 'scale',
            radius: [200, 200],
            center: ['50%', '50%'],
            label: {
              normal: {
                position: 'center'
              }
            },
            data: [{
              value: getPrecent(pieData, 0),
              label: {
                normal: {
                  // formatter: '38',
                  textStyle: {
                    color: '#fe8b53',
                    fontSize: 16,
                    fontWeight: 'bold'
                  }
                }
              }
            }, {
              tooltip: {
                show: false
              },
              label: {
                normal: {
                  formatter: `\n${pieData[0].name}`,
                  textStyle: {
                    color: '#bbeaf9',
                    fontSize: 13
                  }
                }
              }
            }]
          }]
        }
      }

      function pieInit(el, pieData, pieOpt) {
        var pieChart = echarts.init($(el)[0])
        pieChart.setOption(pieOpt, true)
        pieAutoShow(pieChart, pieData, pieOpt)
        window.addEventListener("resize", function () {
          //重置绘制echarts
          pieChart.resize()
        })
      }

      var bar1XData = ['福建', '广东', '北京', '浙江', '江苏', '山东', '上海', '四川', '湖北', '广西']
      var bar1Data = genData(bar1XData.length)
      var bar2XData = ['福建', '广东', '北京', '浙江', '江苏', '山东', '上海', '四川', '湖北', '广西']
      var bar2Data = [
        genData(bar2XData.length),
        genData(bar2XData.length)
      ]
      var bar3XData = ['福建', '广东', '北京', '浙江', '江苏', '山东', '上海', '四川', '湖北', '广西']
      var bar3Data = genData(bar3XData.length)
      genBar("#bar1", bar1Data, bar1XData)
      genBar("#bar2", bar2Data, bar2XData)
      genBar("#bar3", bar3Data, bar3XData)

      function genBar(el, data, xData, lenged) {
        lenged = lenged || ''
        var series = []
        var tpl = {
          name: '',
          type: 'bar',
          barWidth: 10, //柱子宽度
          barGap: 1, //柱子之间间距
          data: []
        }
        if(data[0] instanceof Array) {
          _.forEach(data, function(item, index) {
            var t = deepClone(tpl)
            t.data = sort(item)
            t.name = lenged[index] || ''
            series.push(t)
          })
        } else {
          tpl.data = sort(data)
          tpl.name = lenged[0] || ''
          series.push(tpl)
        }
        var option = {
          color: _colors.reverse(),
          tooltip: {
            trigger: 'axis',
            //  formatter: '{a1}<br />{b1} : {c1}',
            axisPointer: {
              type: 'shadow',
            },
            backgroundColor: 'rgba(9,89,124,0.8)',
            borderWidth: 1,
            borderColor: 'rgba(6,214,224,0.5)',
            textStyle: {
              color: '#4ff2f4'
            }
          },
          grid: {
            top: '8%',
            left: '3%',
            right: '3%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            splitLine: { //grid区域分隔线
              show: false,
              lineStyle: {
                width: 1,
                type: "solid",
                color: "#2a3f7e"
              }
            },
            axisLabel: {
              show: true,
              color: '#c0d4da',
              interval: false,
              rotate: 25,
            },
            axisTick: {
              show: true, //刻度线
              color: "#c0d4da"
            },
            axisLine: {
              show: true, //坐标轴轴线
              lineStyle: {
                width: 1,
                color: "#c0d4da"
              }
            },
            data: xData
          },
          yAxis: {
            splitLine: { //grid区域分隔线
              show: true,
              lineStyle: {
                width: 1,
                type: "solid",
                color: "#2a3f7e"
              }
            },
            axisTick: {
              show: true, //刻度线
              color: '#c0d4da'
            },
            axisLine: {
              show: true, //坐标轴轴线
              lineStyle: {
                width: 1,
                color: "#c0d4da"
              }
            },
            axisLabel: { //坐标轴标签
              show: true
            },
          },
          series: series
        }
        chartInit(el, option)
      }

      var dataX = ['1月', '2月', '3月', '4月', '5月', '6月']
      var lineData = genData(dataX.length)
      var barData = genData(dataX.length)

      genBarLine("#barLine", dataX, [], barData, lineData)

      function genBarLine(el, dataX, legend, barData, lineData) {
        var option = {
          color: ["#c8fd6f", "#08e2ca"],
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            show: true,
            top: 'top',
            textStyle: {
              color: '#fff'
            },
            data: legend
          },
          grid: {
            top: '20%',
            left: '6%',
            right: '3%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [{
            type: 'category',
            data: dataX,
            axisPointer: {
              type: 'shadow'
            },
            axisLabel: {
              show: true,
              color: '#c0d4da',
              interval: false,
              rotate: 20,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#c0d4da'
              }
            }
          }],
          yAxis: [{
              type: 'value',
              name: '单位:个',
              axisLabel: {
                color: '#c0d4da'
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#c8fd6f'
                }
              },
              splitLine: {
                lineStyle: {
                  color: '#2a3f7e'
                }
              }
            },
            {
              type: 'value',
              // name: '单位:个',
              axisLabel: {
                color: '#c0d4da'
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#08e2ca'
                }
              },
              splitLine: {
                lineStyle: {
                  color: '#2a3f7e'
                }
              }
            }
          ],
          series: [{
              name: legend[0],
              type: 'bar',
              barWidth: '35%',
              data: barData,
            },
            {
              name: legend[1],
              type: 'line',
              symbol: 'circle',
              data: lineData,
              yAxisIndex: 1,
            }
          ]
        };
        chartInit(el, option)
      }

      var lineXdata = ['1月', '2月', '3月', '4月', '5月', '6月']
      var lineData = genData(lineXdata.length)
      genLine('#line', lineXdata, lineData)
      function genLine(el, xData, data) {
        var option = {
          title: {
            text: '',
            textStyle: {
              fontWeight: 'normal',
              fontSize: 12,
              color: '#F1F1F3'
            },
            left: '6%'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              lineStyle: {
                color: '#57617B'
              }
            }
          },
          grid: {
            left: '1%',
            right: '2%',
            bottom: '8%',
            top: '14%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            splitLine: { //grid区域分隔线
              show: false,
              lineStyle: {
                width: 1,
                type: "solid",
                color: "#2a3f7e"
              }
            },
            axisLabel: {
              show: true,
              color: '#c0d4da',
              interval: false,
              // rotate: 25,
            },
            axisTick: {
              show: true, //刻度线
              color: "#c0d4da"
            },
            axisLine: {
              show: true, //坐标轴轴线
              lineStyle: {
                width: 1,
                color: "#c0d4da"
              }
            },
            data: xData
          },
          yAxis: {
            splitLine: { //grid区域分隔线
              show: true,
              lineStyle: {
                width: 1,
                type: "solid",
                color: "#2a3f7e"
              }
            },
            axisTick: {
              show: true, //刻度线
              color: '#c0d4da'
            },
            axisLine: {
              show: true, //坐标轴轴线
              lineStyle: {
                width: 1,
                color: "#c0d4da"
              }
            },
            axisLabel: { //坐标轴标签
              show: true
            },
          },
          series: [{
            name: '',
            type: 'line',
            // smooth: true,
            lineStyle: {
              normal: {
                width: 2
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(82, 191, 255, 0.4)'
                }, {
                  offset: 0.8,
                  color: 'rgba(82, 191, 255, 0)'
                }], false),
                shadowColor: 'rgba(228, 139, 76, 0.15)',
                shadowBlur: 10
              }
            },
            symbolSize: 4,
            itemStyle: {
              normal: {
                color: 'rgb(82, 191, 255)',
                borderColor: '#e48b4c'
              },
            },
            data: data
          }]
        }
        chartInit(el, option)
      }

    })
  </script>

</body>

</html>